<!DOCTYPE html>
<html lang="en" class="no-js" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorator="layout">
<head>
<title>专题管理</title>
<script th:src="@{/plugins/bootstrap-wizard/jquery.bootstrap.wizard.js}" src="plugins/bootstrap-wizard/jquery.bootstrap.wizard.js" type="text/javascript"></script>
</head>
<body>
<div layout:fragment="content">
	<div class="row">
		<div class="col-md-12">
			<div class="btn-group pull-right">
				<a href="index.html" th:href="@{/promotion/topic/index/}" id="link_return" class="btn green">返回<i class="fa fa-arrow-circle-o-left"></i></a>
			</div>
		</div>
	</div>
    <div class="row">&nbsp;</div>
	<!-- BEGIN CONTAINER -->
    <div class="portlet box blue" id="form_wizard_1">
        <div class="portlet-title">
            <div class="caption">
                <i class="fa fa-gift"></i> 专题添加- <span class="step-title">
                第<span id="step">1</span>步</span>
            </div>
        </div>
        <div class="portlet-body form">
            <form th:action="@{/promotion/topic/save}" th:object="${topic}" class="form-horizontal" id="form_topic_edit" method="POST" enctype="multipart/form-data">
                <input type="hidden" id="hidden_id" th:field="*{id}" />
                <input type="hidden" id="hidden_step" name="step" />
                <div class="form-wizard">
                    <div class="form-body">
                        <ul id="category" class="nav nav-pills nav-justified steps">
                            <li class="active">
                                <a href="#tab1" data-toggle="tab" class="step">
                                <span class="number">
                                1 </span>
                                <span class="desc">
                                <i class="fa fa-check"></i>通用信息</span>
                                </a>
                            </li>
                            <li>
                                <a href="#tab2" data-toggle="tab" class="step">
                                <span class="number">
                                2 </span>
                                <span class="desc">
                                <i class="fa fa-check"></i>内容</span>
                                </a>
                            </li>
                            <li>
                                <a href="#tab3" data-toggle="tab" class="step active" >
                                <span class="number">
                                3 </span>
                                <span class="desc">
                                <i class="fa fa-check"></i>专题模块</span>
                                </a>
                            </li>
                            <li>
                                <a href="#tab4" data-toggle="tab" class="step">
                                <span class="number">
                                4 </span>
                                <span class="desc">
                                <i class="fa fa-check"></i>设置商品</span>
                                </a>
                            </li>
                        </ul>
                        <div id="bar" class="progress progress-striped" role="progressbar">
                            <div class="progress-bar progress-bar-success" style="width: 25%;">
                            </div>
                        </div>
                        <div class="tab-content">
                            <div class="tab-pane active" id="tab1">
                                <div class="form-group" th:class="${#fields.hasErrors('name')}? 'form-group has-error' : 'form-group'">
                                    <label class="control-label col-md-3">专题名称<span class="required"> * </span> </label>
                                    <div class="col-md-4">
                                        <input type="text" class="form-control" placeholder="专题名称" th:field="*{name}"/>
                                        <span class="help-block" th:if="${#fields.hasErrors('name')}" th:errors="*{name}"></span>
                                    </div>
                                </div>
                                <div class="form-group" th:class="${#fields.hasErrors('fileName')}? 'form-group has-error' : 'form-group'">
                                    <label class="control-label col-md-3">文件名称<span class="required"> * </span> </label>
                                    <div class="col-md-4">
                                        <input id="text_fileName" type="text" class="form-control" placeholder="文件名称" th:field="*{fileName}"/>
                                        <span class="help-block" th:if="${#fields.hasErrors('fileName')}" th:errors="*{fileName}"></span>
                                    </div>
                                </div>
                                <div  class="form-group" th:class="${#fields.hasErrors('url')}? 'form-group has-error' : 'form-group'">
                                    <label class="control-label col-md-3">URL地址</label>
                                    <div class="col-md-4">
                                        <input type="text" class="form-control" placeholder="URL地址" th:field="*{url}"/>
                                        <span class="help-block" th:if="${#fields.hasErrors('url')}" th:errors="*{url}"></span>
                                    </div>
                                </div>
                                <div id="imgFile_text"  th:style="${topic.imgFile == null} ? 'display:none;' : 'display:block;'" class="form-group">
                                    <input type="hidden" th:field="*{imgFile}" />
                                    <label class="control-label col-md-3">图片路径</label>
                                    <div class="col-md-4">
                                        <div class="form-control-static">
                                            <span th:text="${topic.imgFile}"></span>
                                            <button type="button" id="edit_imgFile" class="btn"><i class="fa fa-edit"></i>编辑</button>
                                        </div>
                                    </div>
                                </div>
                                <div id="imgFile_upload" th:class="${#fields.hasErrors('imgFile')}? 'form-group has-error' : 'form-group'" th:style="${topic.imgFile != null} ? 'display:none;' : 'display:block;'" class="form-group">
                                    <label class="control-label col-md-3">上传图片<span class="required"> * </span> </label>
                                    <div class="col-md-4">
                                        <input type="file" class="form-control" placeholder="上传图片" name="uploadfile1"/>
                                        <span class="help-block" th:if="${#fields.hasErrors('imgFile')}" th:errors="*{imgFile}"></span>
                                    </div>
                                </div>
                                <div class="form-group" th:class="${#fields.hasErrors('startDate')}? 'form-group has-error' : 'form-group'">
                                    <label class="control-label col-md-3">开始时间<span class="required"> * </span></label>
                                    <div class="col-md-4">
                                        <input id="text_startDate" type="text" class="form-control" placeholder="开始时间" th:field="*{startDate}"/>
                                        <span class="help-block" th:if="${#fields.hasErrors('startDate')}" th:errors="*{startDate}"></span>
                                    </div>
                                </div>
                                <div class="form-group" th:class="${#fields.hasErrors('endDate')}? 'form-group has-error' : 'form-group'">
                                    <label class="control-label col-md-3">结束时间<span class="required"> * </span> </label>
                                    <div class="col-md-4">
                                        <input id="text_endDate" type="text" class="form-control" placeholder="结束时间" th:field="*{endDate}"/>
                                        <span class="help-block" th:if="${#fields.hasErrors('endDate')}" th:errors="*{endDate}"></span>
                                    </div>
                                </div>
                                <div class="form-group" th:class="${#fields.hasErrors('displayOrder')}? 'form-group has-error' : 'form-group'">
                                    <label class="control-label col-md-3">排序<span class="required"> * </span> </label>
                                    <div class="col-md-4">
                                        <input type="text" class="form-control" placeholder="请输入排序" th:field="*{displayOrder}"/>
                                        <span class="help-block" th:if="${#fields.hasErrors('displayOrder')}" th:errors="*{displayOrder}"></span>
                                    </div>
                                </div>
                                <div class="form-group" >
                                    <label class="control-label col-md-3">关键字</label>
                                    <div class="col-md-4">
                                        <input type="text" class="form-control" placeholder="关键字" th:field="*{keywords}"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-md-3">描述</label>
                                    <div class="col-md-4">
                                        <input type="text" class="form-control" placeholder="描述" th:field="*{description}"/>
                                    </div>
                                </div>
                                 <div id="templateFile_text" th:style="${topic.templateFile == null } ? 'display:none;' : 'display:block;'" class="form-group">
                                    <input type="hidden" th:field="*{templateFile}" />
                                    <label class="control-label col-md-3">模板文件路径</label>
                                    <div class="col-md-4">
                                        <div class="form-control-static">
                                            <span th:text="${topic.templateFile}"></span>
                                            <button type="button" id="edit_templateFile" class="btn"><i class="fa fa-edit"></i>编辑</button>
                                        </div>
                                    </div>
                                </div>
                                <div id="templateFile_upload" th:class="${#fields.hasErrors('templateFile')}? 'form-group has-error' : 'form-group'" th:style="${topic.templateFile != null} ? 'display:none;' : 'display:block;'" class="form-group">
                                    <label class="control-label col-md-3">模版文件<span class="required"> * </span> </label>
                                    <div class="col-md-4">
                                        <input type="file" class="form-control" name="uploadfile2"/>
                                        <span class="help-block" th:if="${#fields.hasErrors('templateFile')}" th:errors="*{templateFile}"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-actions fluid">
                        <div class="row">
                            <div class="col-md-12">
                                <div id="button_group" class="col-md-offset-3 col-md-9">
                                    <a id="btn_next" href="javascript:;" class="btn blue button-next">
                                    下一步<i class="m-icon-swapright m-icon-white"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>

<script th:inline="javascript">
    /*<![CDATA[*/
    $("#text_startDate").click(function(){
			WdatePicker({startDate:'%y-%M-01 00:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss',alwaysUseStartDate:true,readOnly:true});
		}).focus(function () {
            WdatePicker({startDate:'%y-%M-01 00:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss',alwaysUseStartDate:true,readOnly:true});
        });
		$("#text_endDate").click(function(){
			WdatePicker({startDate:'%y-%M-01 00:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss',alwaysUseStartDate:true,readOnly:true});
		}).focus(function () {
            WdatePicker({startDate:'%y-%M-01 00:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss',alwaysUseStartDate:true,readOnly:true});
        });
    $(document).ready(function(){

        $("#edit_imgFile").bind("click",function(){
            $("#imgFile_text").hide();
            $("#imgFile_upload").show();
        });

        $("#edit_templateFile").bind("click",function(){
            $("#templateFile_text").hide();
            $("#templateFile_upload").show();
        });

        $("#category li a").each(function () {

            $(this).bind("click", function () {
                var step = $(this).children(".number").text().trim();
                var checker = validate.form();
                if (checker) {
                    $("#hidden_step").val(step);
                    document.forms[0].submit();
                } else {
                    return false;
                }
            });

        });

        $("#btn_next").bind("click",function(){
            if(validate.form()) {
                $("#hidden_step").val("2");
                document.forms[0].submit();
            }

        });

        var validate = $("#form_topic_edit").validate({
            rules:{
                name:{
                    required:true,
                    maxlength:100
                },
                fileName: {
                    required: true,
                    remote:{
							url:'/promotion/topic/verifyFileName?id='+$('#hidden_id').val().trim()
						}
                },
                startDate: {
                    required: true
                },
                endDate: {
                    required: true
                },
                displayOrder : {
                    required: true,
                    number:true,
                    min:0,
                    max:254
                }

            },
            messages: {
                name: {
                    required: "请输入专题名称",
                    maxlength: "最大不能超过100个字符"
                },
                fileName: {
                    required: "请输入文件名称",
                    remote:"文件名称重复"
                },
                startDate: {
                    required: "请输入开始时间"
                },
                endDate: {
                    required: "请输入结束时间"
                }
            }
        });
    });

    /*]]>*/
</script>